<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <script src="asserts/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <link href="asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script>

        $(document).ready(function () {
            loadUserInfo();

            $('#editInfo').click(function () {
                $('#editUserInfoModal').modal('show');
            });

            $('#saveUserInfoBtn').click(function () {
                const userId = getUserIdFromSession();
                const userName = $('#newName').val();
                const email = $('#newEmail').val();
                const gender = $('#newSex').val();

                if (userName && email && gender) {
                    $.ajax({
                        url: '/admin/AdminController',
                        data: {
                            type: 'updateMessage',
                            userId: userId,
                            userName: userName,
                            email: email,
                            sex: gender
                        },
                        method: 'POST',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult && respResult.status === 500) {
                                alert("日志含义更新用户信息失败");
                            } else if (respResult && respResult.status === 200) {
                                alert("用户信息更新成功");
                                $('#editUserInfoModal').modal('hide');
                                loadUserInfo();
                            } else {
                                alert("来自服务器的意外响应");
                            }
                        },
                        error: function (xhr, status, error) {
                            console.log("AJAX Error: " + status + ": " + error);
                        }
                    });
                }
            });

            $('#changePassword').click(function () {
                $('#passwordModal').modal('show');
            });

            $('#confirmPasswordChange').click(function () {
                const userId = getUserIdFromSession();
                const newPassword = $('#newPassword').val();

                if (newPassword) {
                    $.ajax({
                        url: '/admin/AdminController',
                        data: {
                            type: 'updatePassword',
                            userId: userId,
                            newPassword: newPassword,
                        },
                        method: 'POST',
                        dataType: 'json',
                        success: function (respResult) {
                            if (respResult && respResult.status === 500) {
                                alert("日志含义更新用户信息失败");
                            } else if (respResult && respResult.status === 200) {
                                alert("密码修改成功");
                                $('#passwordModal').modal('hide');
                                window.location.href = 'adminLogin.html';
                            } else {
                                alert("来自服务器的意外响应");
                            }
                        },
                        error: function (xhr, status, error) {
                            console.log("AJAX Error: " + status + ": " + error);
                        }
                    });
                }
            });

            function getUserIdFromSession() {
                return localStorage.getItem("id");
            }

            function loadUserInfo() {
                const userId = localStorage.getItem("id")
                console.log(userId)
                $.ajax({
                    url: '/admin/AdminController',
                    data: {
                        type: 'getMessage',
                        userId: userId
                    },
                    method: 'GET',
                    dataType: 'json',
                    success: function (respResult) {
                        if (respResult && respResult.status === 500) {
                            alert("日志含义加载用户信息失败");
                        } else if (respResult && respResult.status === 200) {
                            displayUserInfo(respResult.data);
                        } else {
                            alert("Unexpected response from server");
                        }
                    },
                    error: function (xhr, status, error) {
                        console.log("AJAX Error: " + status + ": " + error);
                    }
                });
            }

            function displayUserInfo(userData) {
                console.log(userData)
                document.getElementById("uId").textContent = userData[0].uId;
                document.getElementById("uName").textContent = userData[0].uName;
                document.getElementById("uSex").textContent = userData[0].uSex;
                document.getElementById("mRegistrationTime").textContent = userData[0].mRegistrationTime;
                document.getElementById("uEmail").textContent = userData[0].uEmail;
            }
        });

    </script>
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                个人信息
            </div>
            <div class="form-group">
                <label>用户ID:</label>
                <span id="uId"></span>
            </div>
            <div class="form-group">
                <label>姓名:</label>
                <span id="uName"></span>
            </div>
            <div class="form-group">
                <label>性别:</label>
                <span id="uSex"></span>
            </div>
            <div class="form-group">
                <label>注册时间:</label>
                <span id="mRegistrationTime"></span>
            </div>
            <div class="form-group">
                <label>邮箱:</label>
                <span id="uEmail"></span>
            </div>
            <div class="form-group">
                <button id="editInfo" class="btn btn-primary">修改信息</button>
                <button id="changePassword" class="btn btn-secondary">修改密码</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editUserInfoModal" tabindex="-1" role="dialog" aria-labelledby="editUserInfoModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserInfoModalLabel">Edit User Information</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editUserInfoForm">
                    <div class="form-group">
                        <label for="newName">新名字:</label>
                        <input type="text" class="form-control" id="newName" placeholder="输入新名称">
                    </div>
                    <div class="form-group">
                        <label for="newEmail">新邮箱:</label>
                        <input type="email" class="form-control" id="newEmail" placeholder="输入新邮箱">
                    </div>
                    <div class="form-group">
                        <label for="newSex">新的性别:</label>
                        <input type="text" class="form-control" id="newSex" placeholder="输入新性别">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveUserInfoBtn">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Password Modal -->
<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="passwordModalLabel">修改密码</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="newPassword">新密码:</label>
                    <input type="password" class="form-control" id="newPassword">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="confirmPasswordChange">确定</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
